<template>
	<view class="tabbar-warp">
		<view class="tabbar-item" v-for="tab in tabs" :key="tab.pagePath">
			<view class="tabbar" :class="{ active: currentPath === tab.pagePath }" @click="switchTab(tab.pagePath)">
				<image :src="currentPath === tab.pagePath ? tab.selectedIconPath : tab.iconPath" />
				<text>{{ tab.text }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	const currentPath = ref()

	onMounted(() => {
		currentPath.value = getCurrentPages()[0].route
	})

	const tabs = [{
			"pagePath": "pages/index/index",
			"iconPath": "/static/tabbar/model.png",
			"selectedIconPath": "/static/tabbar/model_selected.png",
			"text": "模式"
		},
		{
			"pagePath": "pages/order/index/index",
			"iconPath": "/static/tabbar/model.png",
			"selectedIconPath": "/static/tabbar/model_selected.png",
			"text": "方言下单"
		},
		{
			"pagePath": "pages/manage/index",
			"iconPath": "/static/tabbar/manage.png",
			"selectedIconPath": "/static/tabbar/manage_selected.png",
			"text": "管理中心"
		}
	];

	const tabPaths = tabs.map(t => t.pagePath)

	function switchTab(path) {
		if (path === currentPath.value || !tabPaths.includes(path)) return;
		uni.switchTab({
			url: `/${path}`
		})
	}
</script>

<style lang="scss">
	.tabbar-warp {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		height: 98rpx;
		color: $content-color;
		background-color: #011434;

		.tabbar-item {
			position: relative;
			flex: 1;
			display: flex;
			justify-content: center;

			.tabbar {
				position: absolute;
				top: -16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 23rpx;
				line-height: 40rpx;

				image {
					flex-shrink: 0;
					width: 68rpx;
					height: 68rpx;
					margin-bottom: 4rpx;
				}

				&.active {
					color: $primary-color;
				}
			}
		}
	}
</style>